<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ONLYOFFICE MACROS EDITOR</title>

  <link rel="stylesheet" href="../plugins.css">
  <style type="text/css" media="screen">
    body {
        overflow: hidden;
		width: 100%;
		height: 100%;
		margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    #editor { 
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
	#menu {
		margin: 0;
        position: absolute;
        top: 0;
        bottom: 42px;
        left: 0;
        right: 70%;
		background-color: #F1F1F1;
		overflow: hidden;

		border-right-color: #CBCBCB;
		border-right-style: solid; 
		border-right-width: 1px; 

		padding-right: 10px;
	}
	#editorWrapper {
		margin: 0;
        position: absolute;
        top: 0;
        bottom: 42px;
        left: 30%;
        right: 0;
	}

	.context-menu {
		width: 180px;
		background: transparent;
        position: absolute;
		z-index: 100;
		display: none;
	}

	.context-menu-options {
		list-style: none;
		background-color: #FFFFFF;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		border: 1px solid rgba(0, 0, 0, 0.15);
		border-radius: 4px;
		padding: 5px 0;
    	margin: 2px 0 0;
	}

	.context-menu-option {
		font-weight: normal;
		padding: 5px 20px;
		white-space: nowrap;
		cursor: pointer;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 11px;
		line-height: 1.5;
	}        

	.context-menu-option:hover {
		background: rgba(0, 0, 0, 0.2);
	}

	.macrosAutostart {	
        width: 100%;
        height: 100%;
        left: 0;
        top: calc(50% - 5px);
        position: absolute;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
        font-size: 10px;
		pointer-events: none;
		box-sizing: border-box;
		padding-left: 2px;
	}
	
	.macrosSelected {
		position: relative;
		background-color: #7D858C;
		color: #FFFFFF;
		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
		font-size: 13px;
		padding-bottom: 3px;
		padding-left: 20px;
		padding-right: 10px;
		padding-top: 4px;
		user-select: none;
		margin: 5px 0px 5px 5px;
	}
	
	.macros {
		position: relative;
		background-color: #F1F1F1;
		color: #000000;
		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
		font-size: 13px;
		padding-bottom: 3px;
		padding-left: 20px;
		padding-right: 10px;
		padding-top: 4px;
		user-select: none;
		margin: 5px 0px 5px 5px;
	}
	.macros:hover {
		background-color: #D8DADC;
	}

	.divFooter {
		position: absolute; 
		margin: 0px; 
		padding: 0px; 
		width: 100%; 
		height: 42px; 
		left: 0px; 
		bottom: 0px; 
		box-sizing: border-box;
		border-top-color: #CBCBCB;
		border-top-style: solid; 
		border-top-width: 1px; 
		user-select:none;
	}

	.divRename {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 300px;
		height: 100px;
		margin: -50px 0px 0px -150px;
		border-style: solid;
		border-width: 1px;
		border-color: #CBCBCB;
		background: #F1F1F1;
		z-index: 1001;
	}

	.textSelect::selection {
		background: #D8DADC; /* WebKit/Blink Browsers */
	}
	.textSelect::-moz-selection {
  		background: #D8DADC; /* Gecko Browsers */
	}

	.divRenameMask {
		position: fixed;
		z-index: 1000;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		display: block;
		background-color: #000000;
		opacity: 0.2;
	}

  </style>
</head>
<body>

	<div id="menu">
		<div id="menu_content" style="position:absolute;left:0px;top:0px;width:100%;height:100%;margin:0;padding:0;border:none;"></div>
	</div>
	
	<div id="editorWrapper">
	
	<pre id="editor"></pre>
	
	</div>
	
	<div class="divFooter">
		<div style="position:absolute;margin:0;padding:0;left:10px;top:10px;right: 10px;bottom: 10px;" id="menu_footer">
			<button class="btn-text-default" style="left: 0px; top: 0px; position:relative; bottom: 0px;" id="button_new">New</button>
			<button class="btn-text-default" style="left: 10px; top: 0px; position:relative; bottom: 0px;" id="button_delete">Delete</button>
			<button class="btn-text-default" style="left: 20px; top: 0px; position:relative; bottom: 0px;" id="button_rename">Rename</button>
			<button class="btn-text-default" style="left: 30px; top: 0px; position:relative; bottom: 0px; display:none" id="button_autostart">Autostart</button>
		</div>
		<button class="btn-text-default primary" style="right: 10px; top: 10px; position:absolute; bottom: 10px;" id="button_run">Run</button>
	</div>

	<div class="divRenameMask" id="idRenameMask" style="display: none">		
	</div>
	<div class="divRename" id="idRename" style="display: none">
		<input type="text" class="form-control textSelect" style="top:18px;margin: 0px;width:260px;left:20px;position:absolute;" id="rename_text" autofocus="autofocus" />
		<div class="divFooter">
			<button class="btn-text-default primary" style="left: 75px; top: 10px; width:70px; position:absolute; bottom: 10px;" id="rename_ok">Ok</button>
			<button class="btn-text-default" style="right: 75px; top: 10px; width:70px; position:absolute; bottom: 10px;" id="rename_cancel">Cancel</button>
		</div>
	</div>

	<!-- load ace -->
	<script src="tern.ace/demos/scripts/ace-builds/src-min/ace.js"></script>
	<!-- load ace language tools -->
	<script src="tern.ace/demos/scripts/ace-builds/src-min/ext-language_tools.js"></script>

	<!-- Tern JS -->
	<script src="tern.ace/demos/scripts/ternjs/acorn/acorn.js"></script>
	<script src="tern.ace/demos/scripts/ternjs/acorn/acorn_loose.js"></script>
	<script src="tern.ace/demos/scripts/ternjs/acorn/util/walk.js"></script>
	<script src="tern.ace/demos/scripts/ternjs/tern/lib/signal.js"></script>
	<script src="tern.ace/demos/scripts/ternjs/tern/lib/tern.js"></script>
	<script src="tern.ace/demos/scripts/ternjs/tern/lib/def.js"></script>
	<script src="tern.ace/demos/scripts/ternjs/tern/lib/comment.js"></script>
	<script src="tern.ace/demos/scripts/ternjs/tern/lib/infer.js"></script>

	<!-- ACE Tern -->
	<script src="tern.ace/lib/tern-ace.js"></script>

	<script src="tern.ace/demos/browser.json.js"></script>
	<script src="tern.ace/demos/ecma5.json.js"></script>
	
	<!-- jquery -->
	<script src="jquery.min.js"></script>
	
	<!-- plugin -->
	<script type='text/javascript' src='../pluginBase.js'></script>    

	<!-- code -->
	<script src="code.js"></script>

	<div id="context-menu-id" class="context-menu"><ul class="context-menu-options"><li id="menu_autostart_id" class="context-menu-option" onclick="window.CustomContextMenu.onAutostartClick();">Start automatically</li></ul></div>
</body>
</html>
